<template>
  <div class="content q-pa-sm">
    <table-basic :title="'分类管理'" :columns="columns" :tableData="tableData" :searchName="searchName"
                 @searchHandler="searchHandler"
                 @Refresh="Refresh"
                 @updateTable="updateTable"
                 @filtersHandler="filtersHandler"
                 @onDbclick="onDbclick"
    >
      <template v-slot:toolbar>
        <div class="row q-gutter-sm">
          <q-btn color="secondary" label="添加分类" @click="alert=true"  />
          <q-btn color="negative" :disable="checkState <= 0" label="批量删除" @click="deleteHandler"  />
        </div>
      </template>
    </table-basic>

    <form-basic :alert="alert" @close="close" :from="from" :title="'分类管理-添加'"
                @submit="submit"
                @uploadedImage="uploadedImage"
                @removedImage="removedImage"
                state="1"
    ></form-basic>

    <form-basic :alert="updatealert"  @close="close" :from="from"  :title="'分类管理-详情'"
                @submit="update"
                @uploadedImage="uploadedImage"
                @removedImage="removedImage"
                state="2"
    ></form-basic>
  </div>
</template>

<script>
  import { getClassList, addClass, removeClass, updateClass } from 'src/api/class'
  export default {
    name: "class",
    data () {
      return {
        alert: false,
        updatealert: false,
        options: [],
        from:[
          {
            type: 'string', title: '类别名称', class: '', required: true, style: '', field: 'name',
            rule: [ val=> !!val || '请输入类别名称']
          },
          {
            type: 'number', title: '展示顺序', class: '', required: true, style: 'width: 200px',field: 'showOrder',
            rule: [ val=> !!val || '请输入展示顺序']
          },
          {
            type: 'file', title: '图片地址', uploadTitle: '推荐尺寸532*181', required: true, style: '', class:'col',field: 'imageUrl', maxFiles: 1
          },
          {
            type: 'select', title: '是否显示', class:'', options:[{value: 1, label: '是'},{value: 2, label: '否'}], style: 'width: 200px',field: 'isShow'
          }
        ],
        tableData:[],
        updateData: {},
        deleteDisable:true,
        searchName:[
        ],
        searchFilter: {},
        columns: [
          {name:'select', field: 'select'},
          {name: 'imageUrl', label: '商品大图', field: 'imageUrl', style: `width:532px;height:181px`},
          {name: 'name', align: 'center', label: '类别名称', field: 'name'},
          {name: 'showOrder',align: 'center', label: '展示顺序', field: 'showOrder',sortable: true},
          {name: 'isShow', align: 'center',label: '是否显示',format: (val, row) => `${val!==0?'是':'否'}`, field: 'isShow', sortable: true}
        ],
        page: {
          limit: 30,
          page: 1
        },
        imageUrl: []
      }
    },
    mounted() {
      this.initialize()
    },
    components: {
      TableBasic: () => import('components/tables/TableBasic'),
      FormBasic: () => import('components/dialog/formBasic')
    },
    methods:{
      initialize(page,limit){
        if(page)
          this.page.page = page
        if(limit)
          this.page.limit = limit
        let params = Object.assign(this.page, this.searchFilter)
        getClassList(params).then(
          success=>{
            this.tableData = success.map(item=>{
              item.select = false
              return item
            })
            this.$bus.$emit('UPDATE_PAGINATION', success.total)
          }
        )
      },
      onDbclick(index){
        this.updatealert = true
        this.updateData = this.tableData[index];
        this.$bus.$emit('updateState', this.updateData)
      },
      updateTable ({page, rowsPerPage, sortBy}){
        this.initialize(page, rowsPerPage)
      },
      uploadedImage(response){
        this.imageUrl.push(response.data)
      },
      removedImage(response){
        this.imageUrl = this.imageUrl.filter(r=>r !== response.data)
      },
      submit(data){
        let params = Object.assign(data,{
          imageUrl: this.imageUrl.join(',')
        })
        addClass(params).then(
          success=>{
            this.alert = false
            this.initialize()
          }
        )
      },
      update(data){
        let params = Object.assign(data,{
          imageUrl: this.imageUrl.join(','),
          id: this.updateData.id
        })
        updateClass(params).then(
          success=>{
            this.updatealert = false
            this.initialize()
          }
        )
      },
      deleteHandler(){
        let deleteids = this.checkItems.join(',')
        removeClass({ids: deleteids}).then(
          success=>{
            this.initialize()
          }
        )
      },
      filtersHandler(filter){
        this.searchFilter = filter;
        this.initialize();
      },
      searchHandler(filter){

      },
      Refresh(){
        this.initialize();
      },
      checkRows(flag){
        // console.log(flag)
      },
      close(){
        this.alert = false
        this.updatealert = false
      }
    },
    computed:{
      checkState: function () {
        return this.tableData.reduce((prev, cur) => {
          return prev + (cur.select? 1: 0)
        }, 0)
      },
      checkItems: function () {
        return this.tableData.filter(r=>r.select).map(n=>{
          return n.id
        })
      }
    },
    created() {
      this.$bus.$on('checkRows', this.checkRows)
    },
    beforeDestroy() {
      this.$bus.$off('checkRows', this.checkRows)
    }
  }
</script>

<style scoped>

</style>
